<script setup>
import SearchTable from "./component/SearchVehicle.vue"
import moment from "moment";
import {getTodayCurve, getAlarmLevelRankList, getAlarmUnitRank, getAlarmTypeList, getAlertable, getCurve, getDictDetail } from "./utils";


import * as echarts from 'echarts';
import { CirclePlus, VideoPlay } from '@element-plus/icons-vue'
import { ref, reactive, getCurrentInstance, onMounted, watch, nextTick } from "vue"

const instance = getCurrentInstance()
const _this = instance.appContext.config.globalProperties //vue3获取当前this

import { globalStore } from "@/store/global";
const globalVue = globalStore();

let opction = [
  {
    id: 1,
    type: 'CLOSE_EYE_FATIGUE',
    name: '闭眼疲劳',
    state: 'Wheelchair',
    color: '#E0AA26',
    icon: require("@/assets/image/index/list_ico_wheelchair.png"),
  },
  {
    id: 2,
    type: 'BLINK_EYE_FATIGUE',
    name: '频繁眨眼疲劳',
    state: 'Wheelchair',
    color: '#E0AA26',
    icon: require("@/assets/image/index/list_ico_wheelchair.png"),
  },
  {
    id: 3,
    type: 'YAWN_FATIGUE',
    name: '打哈欠疲劳',
    state: 'Wheelchair',
    color: '#E0AA26',
    icon: require("@/assets/image/index/list_ico_wheelchair.png"),
  },
  {
    id: 4,
    type: 'DISTRACTION_DRIVE',
    name: '左顾右盼分神驾驶',
    state: 'Wheelchair',
    color: '#E0AA26',
    icon: require("@/assets/image/index/list_ico_wheelchair.png"),
  },
  {
    id: 5,
    type: 'SMOKE_DISTRACTION',
    name: '抽烟分神',
    state: 'Smoking',
    color: '#F8780B',
    icon: require("@/assets/image/index/list_ico_somke_active.png"),
  },
  {
    id: 6,
    type: 'PHONE_DISTRACTION',
    name: '打电话分神',
    state: 'Phone',
    color: '#E60B18',
    icon: require("@/assets/image/index/list_ico_phone_active.png"),
  },
  {
    id: 7,
    type: 'WHEELCHAIR_SEATING',
    name: '轮椅坐人',
    state: 'Wheelchair',
    color: '#E0AA26',
    icon: require("@/assets/image/index/list_ico_wheelchair.png"),
  },
  {
    id: 8,
    type: 'OCCLUSION',
    name: '轮椅坐人',
    state: 'Occlusion',
    color: '#E0AA26',
    icon: require("@/assets/image/index/list_ico_wheelchair.png"),
  },
]

// 生命周期
onMounted(() => {
  getSelect();
  // window.onresize = function () {
  //   console.log('窗口大小改变');
  // }
})

let getSelect = async () => {
  
  selectClassification.value = await globalVue.getSelect('classificationSelect');
  let algorithm_type = await getDictDetail(instance, {name: 'camera_algorithm'});
  selectAlgorithm.value = algorithm_type.data

  instance.proxy.$http.get('archiveData.dictDetail', {params: {name: 'alarm_algorithm'}}).then(res=>{
    res.data.unshift({
      label: "All",
      value: ''
    })
    selectType.value = res.data;
  })
  instance.proxy.$http.get('archiveData.getAmbulanceSelect').then(res=>{
    selectVehicle.value = res.data.map(i => {
      i['label'] = i.selectName;
      i['value'] = i.id;
      return i;
    });
    init(selectVehicle.value[0].value);
    searchForm['ambulanceId'] = selectVehicle.value[0].value || null;
  })
  // let list = await getDictDetail(instance, {name: 'camera_algorithm'});
  // algorithmSelect.value = list.data;
}

// 下拉数据
const selectVehicle = ref([]);   // 救护车
const selectType = ref([]);   // 
const selectAlgorithm = ref([]);   // 
const selectClassification = ref([]);   // 

let type_color = [
  {type: 1, label: 'Phone', color: 'rgb(250, 56, 59)'},
  {type: 2, label: 'Smoking Smoke', color: 'rgb(248, 122, 13)'},
  {type: 3, label: 'Wheelchair seating', color: 'rgb(224, 171, 36)'},
  {type: 4, label: 'Occlusion', color: 'rgb(183, 110, 222)'},
]


let ambulanceDetail = ref([]);   // 救护车详情

// Today’s alarm analysis
let today = ref(null);
let todayFirst = true;
let todayLoading = ref(true);
let todayCurvesList = ref([]);

// Comparative analysis of alarms
let analysis = ref(null);
let analysisFirst = true;
let analysisLoading = ref(true);
let curvesList = ref([[], []]);

// Alarm aggregation diagram
let diagram = ref(null);
let diagramFirst = true;
let diagramLoading = ref(true);
let alarmTypeLists = ref([]);

// Alarm Proportion
let proportion = ref(null);
let proportionFirst = true;
let proportionLoading = ref(true);
let alarmLevelRankLists = reactive({
  list: []
});

// camear 摄像头
let camearList = reactive([
  { value: 'City：', name: '', imgSrc: require('@/assets/image/alarm_management/ico_administrators.png') },
  { value: 'Driver：', name: '', imgSrc: require('@/assets/image/alarm_management/ico_driver.png') },
  { value: 'Algorithm：', name: '', imgSrc:  require('@/assets/image/alarm_management/ico_algorithm.png') },
  { value: 'Organization：', name: '', imgSrc: require('@/assets/image/alarm_management/ico_hosptial.png') },
  { value: 'Camera Name：', name: '', imgSrc: require('@/assets/image/alarm_management/ico_number.png') },
])

// Alertable  
let alertableList = reactive([
  { 
    title: `Processed Alarms`, 
    value: 0,
    imgSrc: require('@/assets/image/alarm_management/ico_processed.png')
  },{ 
    title: `Untreated Alarms`, 
    value: 0,
    imgSrc: require('@/assets/image/alarm_management/ico_pending.png')
  }
])

let searchForm = reactive({
  date: [moment().subtract(1, 'months').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
  alarmType: ''
})

function onSearch(){
  searchForm['alarmType'] = '';
  init();
}

async function init(startId){
  // 获取救护车信息
  instance.proxy.$http.get('archiveData.getAmbulanceDetail',{ params: {ambulanceId: startId || searchForm.ambulanceId || 0} }).then(res=>{
    camearList[0].name = res.data.city;
    camearList[1].name = res.data.driver;
    camearList[2].name = res.data.algorithm;
    camearList[3].name = res.data.hospital;
    camearList[4].name = res.data.cameraName;
    ambulanceDetail.value = res.data;
  })

  let time = new Date()
  let paramsTodayCurve = {
    ambulanceId: startId || searchForm.ambulanceId || 0,
    startTime: moment(time).format("YYYY-MM-DD") + ' 00:00:00',
    endTime: moment(time).format("YYYY-MM-DD") + ' 23:59:59',
  }
  let params = {
    ambulanceId: startId || searchForm.ambulanceId || 0,
    startTime: searchForm.date && searchForm.date[0] + ' 00:00:00' || moment(time).format("YYYY-MM-DD") + ' 00:00:00',
    endTime: searchForm.date && searchForm.date[1] + ' 23:59:59' || moment(time).format("YYYY-MM-DD") + ' 23:59:59',
  }
  let getAlarmLevelRankLists = await getAlarmLevelRankList(instance, params);
  // let getAlarmUnitRanks = await getAlarmUnitRank(instance, params)
  let getAlarmTypeLists = await getAlarmTypeList(instance, params);
  let getAlertables = await getAlertable(instance, params);
  let getCurves = await getCurve(instance, params);  // []  0:虚线  1：实线
  let todayCurves = await getTodayCurve(instance, paramsTodayCurve);
  // getAlertables

  alarmLevelRankLists.list = getAlarmLevelRankLists.data || [];
  alarmTypeLists.value = getAlarmTypeLists.data || [];
  curvesList.value = getCurves.data || [];
  todayCurvesList.value = todayCurves.data || [];
  
  // Alertable
  alertableList[0].value = getAlertables.data.processed;
  alertableList[1].value = getAlertables.data.pending;
  let alertableTotal = alertableList.map(i => i.value).reduce((a,b) => a+b)
  alertableList.value = alertableList.map(i => {
    i['percentage'] = alertableTotal == 0 ? '0%' : Math.floor((i.value / alertableTotal)*100) + "%";
    return i;
  })
  
  // Alarm aggregation diagram
  var diagramChartDom =  diagram.value;
  var diagramChart = echarts.init(diagramChartDom);
  let ciyunData = alarmTypeLists.value.map(i => {
    i['name'] = opction.find(j => j.type == i.alarmType)?.state;
    i['value'] = i.num;
    return i;
  })
  //偏移量
  var offsetData = [
      [40, 35],
      [50, 65],
      [67, 75],
      [64, 25],
      [16, 25],
      [20, 70],
      [77, 45],
      [20, 50]
  ];
  const max = ciyunData.reduce(function (prev, next) {
      return Math.max(prev, next.value);
  }, 0);

  const sortData = ciyunData.sort((x, y) => y.value - x.value);
  const data = sortData.map((d, i) => {
      const scale = d.value / max;
      return {
          name: d.name,
          value: offsetData[i],
          symbol: 'circle',
          symbolSize: scale * 100,
          source: d.value,
          label: {
              normal: {
                  textStyle: {
                      color: "#ffffff",
                      fontSize: 14
                  }
              }
          }
      }
  });
  let diagramOption = {
      color: ['rgba(252, 90, 165, 0.9)'],
      // color: ['#FB393C', '#F87822', '#F6BB2C', '#B86FDE', '#B86FDE'],
      grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0
      },
      tooltip: {
          show: true,
          formatter(params){ 
              return `${params.name}：${sortData[params.dataIndex].value}`
          }
      },
      xAxis: [{
          type: "value",
          show: false,
          nameLocation: "middle",
          min: 0,
          max: 100,
          nameGap: 0
      }],
      yAxis: [{
          show: false,
          nameLocation: "middle",
          min: 0,
          max: 100,
          nameGap: 0
      }],
      series: [{
          type: "scatter",
          label: {
              normal: {
                  show: true,
                  align: "center",
                  verticalAlign: 'middle',
                  formatter(params){ 
                    let str = 
                    '{a|' + 
                    params.data.source + 
                    '} \n' +
                    '{b|' + 
                    params.data.name +'}'
                    return str
                  },
                  rich: {
                    a: {
                      fontSize: '16px',
                      color: '#FFFFFF'
                    },
                    b: {
                      fontSize: '12px',
                      color: '#474C50'
                    }
                  },
                  color: "#fff",
                  textStyle: {
                      fontSize: "20"
                  }
              }
          },
          itemStyle: {
            normal:{
              color: function(val) {
                let color = type_color.find(i => i.label.indexOf(val.name) > -1)?.color || 'red'
                return color
              },
            }
          },
          data: data
      }]
  };
  diagramChart.on('finished', _ => {
    if(diagramFirst){
      diagramFirst = false;
      diagramLoading.value = false; //关闭loading
    };
  });
  diagramChart.setOption(diagramOption);


  // Today’s alarm analysis
  var todayChartDom =  today.value;
  var todayChart = echarts.init(todayChartDom);
  let todayOption = {
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      right: 60,
      bottom: 40
    },
    xAxis: {
      type: 'category',
      // boundaryGap: false,     moment().format('HH:MM')
      data: todayCurves.data.map(i => i.time.substr(11) ),
      axisLabel: {  
        interval: 0,
        rotate: 0,
        align: 'center',
        margin: 10
      }
      // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: function(val) {
        return Object.is(val.max, NaN) ? 80 : val.max
      },
    },
    series: [
      {
        name: 'Today',
        data: todayCurves.data.map(i => i.num ),
        // data: [620, 632, 601, 634, 1190, 1230, 1120],
        type: 'line',
        showSymbol: false,
        smooth: true,
        lineStyle: {
          color:  new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            { offset: 0, color: '#2CFCFE' },
            { offset: 1, color: '#3A4EFC' }
          ])
        },
        areaStyle: {
          opacity: 0.2,
          color:  new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            { offset: 0, color: '#2CFCFE' },
            { offset: 1, color: '#3A4EFC' }
          ])
        }
      },
    ]
  };
  todayChart.on('finished', _ => {
    if(todayFirst){
      todayFirst = false
      todayLoading.value = false //关闭loading
    }
  })
  todayChart.setOption(todayOption);

  // Comparative analysis of alarms
  var analysisChartDom =  analysis.value;
  var analysisChart = echarts.init(analysisChartDom);
  let analysisOption = {
    tooltip: {
      trigger: 'axis',
      formatter(arr){ 
        let str = ''
        arr.forEach(i => {
          str += i.name + '<br>'+ i.marker + i.seriesName + '：' + i.value + '<br>'
        })
        return str
      },
    },
    legend: {
      show: true,
      data: ['Previous Period', 'Current Period'],
      bottom: 0,
      textStyle: {
        color: '#D3D5D6'
      }
    },
    xAxis: {
      type: 'category',
      data: getCurves.data[1].map(i => i.time)
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          color: '#5F6060',
          type: 'dashed'
        }
      },
      min: 0,
      max: function(val) {
        return Object.is(val.max, NaN) ? 80 : val.max
      },
    },
    series: [
      {
        name: 'Previous Period',
        data: getCurves.data[0].map(i => {
          return {
            value: i.num,
            name: i.time,
            time: i.time,
          }
        }),
        type: 'line',
        smooth: true,
        showSymbol: false,
        lineStyle: {
          type: 'dashed'
        }
      },
      {
        name: 'Current Period',
        data: getCurves.data[1].map(i => {
          return {
            value: i.num,
            time: i.time,
            name: i.time
          }
        }),
        type: 'line',
        showSymbol: false,
        smooth: true,
      },
    ]
  };
  analysisChart.on('finished', _ => {
    if(analysisFirst){
      analysisFirst = false
      analysisLoading.value = false //关闭loading
    }
  })
  analysisChart.setOption(analysisOption);

  // Alarm Proportion
  var proportionChartDom =  proportion.value;
  var proportionChart = echarts.init(proportionChartDom);
  let proportionOption = {
    // color: ['#FB393C', '#F87822', '#F6BB2C', '#B86FDE', '#B86FDE'],
    legend: {
      show: alarmLevelRankLists.list.length > 0,
      bottom: '5%',
      left: 'center',
      textStyle: {
        color: '#474C50'
      }
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '48%'],
        avoidLabelOverlap: false,
        top: 0,
        bottom: 50,
        itemStyle: {
          normal:{
            color: function(val) {
              let _color = type_color.find(i => i.type == val.data.alarmType)?.color
              return _color || '#F6BB2C'
            },
            borderRadius: 99999,
            borderColor: '#FFFFFF',
            borderWidth: 4,
          }
        },
        
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 26,
            formatter(params){ 
              return `${params.percent}%`
            },
            fontWeight: 'bold'
          },
        },
        labelLine: {
          show: false
        },
        data: alarmLevelRankLists.list.map(i => {
          let obj = selectAlgorithm.value.find(j => j.value == i.alarmType)
          i['name'] = obj?.label || '';
          i['value'] = i.num;
          return i;
        })
      }
    ]
  };
  proportionChart.on('finished', _ => {
    if(proportionFirst){
      proportionFirst = false;
      proportionLoading.value = false; //关闭loading
    };
  });
  proportionChart.setOption(proportionOption, true);

  window.addEventListener("resize",function (){
    diagramChart.resize();
    todayChart.resize();
    analysisChart.resize();
    proportionChart.resize();
  })
}


let updataEchart = async () => {
  let time = new Date();  
  let params = {
    ambulanceId: searchForm.ambulanceId,
    alarmType: searchForm.alarmType,
    startTime: searchForm.date && searchForm.date[0] + ' 00:00:00' || moment(time).format("YYYY-MM-DD") + ' 00:00:00',
    endTime: searchForm.date && searchForm.date[1] + ' 23:59:59' || moment(time).format("YYYY-MM-DD") + ' 23:59:59',
  }
  let getCurves = await getCurve(instance, params)  // []  0:虚线  1：实线
  
  // Comparative analysis of alarms
  var analysisChartDom =  analysis.value;
  var analysisChart = echarts.init(analysisChartDom);
  analysisLoading.value = true //打开loading
  let analysisOption = {
    tooltip: {
      trigger: 'axis',
      formatter(arr){ 
        let str = ''
        arr.forEach(i => {
          str += i.name + '<br>'+ i.marker + i.seriesName + '：' + i.value + '<br>'
        })
        return str
      },
    },
    legend: {
      show: true,
      data: ['Previous Period', 'Current Period'],
      bottom: 0,
      textStyle: {
        color: '#D3D5D6'
      }
    },
    xAxis: {
      type: 'category',
      data: getCurves.data[1].map(i => i.time)
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          color: '#5F6060',
          type: 'dashed'
        }
      },
      min: 0,
      max: function(val) {
        return Object.is(val.max, NaN) ? 80 : val.max
      },
    },
    series: [
      {
        name: 'Previous Period',
        data: getCurves.data[0].map(i => {
          return {
            value: i.num,
            name: i.time,
            time: i.time,
          }
        }),
        type: 'line',
        smooth: true,
        showSymbol: false,
        lineStyle: {
          type: 'dashed'
        }
      },
      {
        name: 'Current Period',
        data: getCurves.data[1].map(i => {
          return {
            value: i.num,
            time: i.time,
            name: i.time
          }
        }),
        type: 'line',
        showSymbol: false,
        smooth: true,
      },
    ]
  };
  analysisChart.on('finished', _ => {
    analysisLoading.value = false //关闭loading
  })
  analysisChart.setOption(analysisOption);
}

function vehicleChange(){
  instance.proxy.$http.get('archiveData.getAmbulanceSelect', {params: {type: searchForm['type'] || null}}).then(res=>{
    selectVehicle.value = res.data.map(i => {
      i['label'] = i.selectName;
      i['value'] = i.id;
      return i;
    });
    init(selectVehicle.value[0]?.value);
    searchForm['ambulanceId'] = selectVehicle.value[0].value || null;
  })
}
</script>
<template>
  <div class="alarm_index">
    <SearchTable :searchForm="searchForm" @onSearch="onSearch" @vehicleChange="vehicleChange" :selectClassification="selectClassification" :selectVehicle="selectVehicle" />
    <div class="total_row marBottom20 h360">
      <div class="total_item">
        <div class="camear_header">
          <img  class="camear_img" src="~@img/alarm_management/ico_camera.png" alt="">
          <div class="camear_title">
            <div class="title_active" :title="ambulanceDetail.codenumber + ' | ' + 'ambulanceDetail.carnumber'">{{ambulanceDetail.codenumber}} | {{ambulanceDetail.carnumber}}</div>
            <!-- <div>On Line</div> -->
          </div>
        </div>
        <div class="camear_list">
          <div class="camear_item" v-for="(item, index) in camearList" :key="index">
            <img :src="item.imgSrc" alt="">
            <span :title="item.name">{{ item.value }}{{ item.name }}</span>
          </div>
        </div>
      </div>
      <div class="total_item">
        <div class="title_item row_drop">Alarm Proportion</div>
        <div ref="proportion" v-loading="proportionLoading" class="echarts_box" :style="{opacity: alarmLevelRankLists.list.length > 0 ? '1' : '0'}"></div>
        <div class="no_data_css" :style="{opacity: alarmLevelRankLists.list.length > 0 ? '0' : '1'}">No Data</div>
      </div>
      <div class="total_item">
        <div class="title_item row_drop">Alarm Aggregation Diagram</div>
        <div ref="diagram" v-loading="diagramLoading"  class="echarts_box" :style="{opacity: alarmTypeLists.length > 0 ? '1' : '0'}"></div>
        <div class="no_data_css" :style="{opacity: alarmTypeLists.length > 0 ? '0' : '1'}">No Data</div>
      </div>
      <div class="total_item">
        <div class="title_item row_drop">Alertable</div>
        <div class="alertable_box">
          <div class="alertable_item" v-for="(item, index) in alertableList" :key="index">
            <img :src="item.imgSrc" alt="">
            <div class="item_title">{{ item.title }}</div>
            <div class="item_value">
              <span>{{ item.value }}</span>
              <span>{{ item.percentage }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="total_row h484">
      <div class="total_item  form_search_echarts">
        <div class="alarms_title">
          <div class="title_item row_drop">Comparative Alarms Analysis</div>
          <el-select
            v-model="searchForm.alarmType"
            placeholder="Please Select"
            @change="updataEchart"
            clearable
          >
            <el-option v-for="item in selectType" :key="item.id" :label="item.label" :value="item.value" />
          </el-select>
        </div>
        <div ref="analysis" v-loading="analysisLoading" class="echarts_box"></div>
      </div>
      <div class="total_item">
        <div class="title_item row_drop">Today’s Alarm Analysis</div>
        <div ref="today" v-loading="todayLoading" class="echarts_box"></div>
      </div>
    </div>  
  </div>
</template>
<style scoped lang="less">
.alarm_index{
  color: var(--mw-font-color-content);
  height: calc(100vh - 110px);
  background-color: var(--mw-page-background-color);
  padding: 20px;
  display: flex;
  flex-direction: column;
  .no_data_css{
    font-size: 20px;
    text-align: center;
    margin-top: 50px;
    position: absolute;
    left: 50%;
    top: 120px;
    transform: translateX(-50%);
  }
  .total_row{
    display: flex;
    justify-content: space-between;
    .total_item{
      flex: 1;
      padding: 20px;
      margin-right: 20px;
      box-shadow: 0px 6px 12px 1px rgba(26,84,193,0.1);
      border-radius: 8px;
      background-color: var(--mw-page-background-bright-color);
      position: relative;
      .alertable_box{
        width: 100%;
        height: calc(100% - 44px);
        display: flex;
        margin-top: 20px;
        justify-content: space-between;
        .alertable_item{
          text-align: center;
          padding: 20px;
          width: calc(50% - 10px);
          height: 100%;
          background-color: var(--mw-page-background-color);
          border-radius: 8px;
          .item_value{
            span:nth-child(1){
              font-size: 42px;
              color: var(--mw-font-color-title);
              margin-right: 5px;
            }
            span:nth-child(2){
              font-size: 22px;
              color: var(--mw-not-important-color);
            }
          }
          .item_title{
            width: 100%;
            margin: 12px 0;
            text-align: center;
          }
          img{
            width: 100px;
            height: 100px;
            margin: 0 auto;
          }
        }
      }
      .camear_list{
        width: 100%;
        height: calc(100% - 100px);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .camear_item{
          margin: 10px 0;
          font-size: 14px;
          color: var(--mw-font-color-content);
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          img{
            width: 20px;
            height: 20px;
            margin-right: 8px;
          }
        }
      }
      .camear_header{
        display: flex;
        flex-direction: row;
        .camear_title{
          .title_active{
            font-size: 24px;
            line-height: 100px;
            color: var(--mw-font-color-title);
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
          }
        }
        .camear_img{
          width: 88px;
          height: 100px;
          margin-right: 20px;
          img{
            width: 100%;
            height: 100%;
          }
        }
      }
      .alarms_title{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }
      .echarts_box{
        width: 100%;
        height: calc(100% - 24px);
      }

      .rank_list{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: calc(100% - 24px);
        .rank_item{
          display: flex;
          align-items: center;
          justify-content: space-between;
          img{
            width: 30px;
            height: 30px;
          }
          .rank_content{
            flex: 1;
            margin: 0 10px;
            .rank_title{
              font-size: 14px;
            }
            .rank_progress{
              height: 6px;
              margin: 4px 0;
              border-radius: 1px;
              background: linear-gradient(90deg, #3a8cfc, #3a4efc);
            }
          }
          .rank_val{
            width: 30px;
            text-align: center;
          }
        }
        .rank_item:nth-child(-n+3){
          .rank_content{
            .rank_progress{
              background: linear-gradient(90deg, #FB393C, #FB396D);
            }
          }
        }
        
      }
      .title_item{
        color: var(--mw-font-color-title);
        font-size: 16px;
        line-height: 24px;
      }
    }
    .total_item:nth-last-child(1){
      margin-right: 0;
    }
  }
  .h360{min-height: 360px;height: 360px;}
  .h484{
    min-height: 300px;
    flex: 1;
  }
  .marBottom20{margin-bottom: 20px;}
}
</style>